<!--
 * @Author: zhuxiaoyi
 * @Date: 2023-12-12 15:39:31
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2023-12-22 16:09:45
 * @Description: 
-->
<template>
    <div class="flow-container">
        <el-row>
            <el-col :span="4" class="side-container">
                <div class="side-chart" :style="`height:${viewHeight - 60}px`">
                </div>
            </el-col>
            <el-col :span="20" class="main-container">
                <el-row>
                    <el-col :span="20"></el-col>
                    <el-col :span="4" style="padding: 20px 0;"><el-button type="primary"
                            style="width: 150px;cursor: pointer;">开始</el-button></el-col>
                </el-row>
                <div class="main-chart">
                </div>
            </el-col>
        </el-row>
        <el-drawer v-model="drawer" :title="drawInfo.name" :before-close="handleClose">
            <p style="font-weight:600;font-size:18px">参数设置</p>
            <el-form label-width="200px">
                <el-form-item :label="formItem.key" v-for="formItem in drawInfo.form">
                    <el-input v-model="formItem.value" />
                </el-form-item>
                <el-form-item :label="'方法'" v-if="drawInfo.name == '影像修正'">
                    <el-select v-model="valu1e" class="m-2" placeholder="选项" size="large">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div style="text-align: center;">
                <el-button @click="drawer = false">取消</el-button>
                <el-button type="primary" @click="drawer = false">确定</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
import { Graph, Path, Cell } from '@antv/x6'
import task from '@/assets/img/780.jpg'
import router from '@/router'
const viewHeight = window.innerHeight
let valu1e = ref('')
let valu1e1 = ref('土壤水分法')
let drawer = ref(false)
let drawInfo: any = reactive({
    name: '',
    form: [
        {
            key: "字段1",
            value: "路径地址"
        },
        {
            key: "字段1",
            value: "路径地址"
        },
        {
            key: "字段1",
            value: "路径地址"
        },
        {
            key: "字段1",
            value: "路径地址"
        },
        {
            key: "字段1",
            value: "路径地址"
        },
    ]
})
const options = [
    {
        value: '多源多时相干旱指数一致性分析',
        label: '多源多时相干旱指数一致性分析',
    },
    {
        value: '多源多时相光谱反射率一致性修正',
        label: '多源多时相光谱反射率一致性修正',
    },
    {
        value: '多时相特征空间一致性修正',
        label: '多时相特征空间一致性修正',
    },
]
const options1 = [
    {
        value: '2',
        label: '土壤水分法',
    },
    {
        value: '1',
        label: '蒸散发法',
    },
]
onMounted(() => {
    let siedCotainer: any = document.querySelector(".side-chart")
    const graph = new Graph({
        container: siedCotainer,
        background: {
            color: '#F2F7FA',
        },
    })

    graph.on('node:click', ({ e, x, y, node, view }) => {
        switch (node.id) {
            case "1":
                router.push('/index/flow')
                break;
            case "2":
                router.push('/index/flow1')
                break;
            case "3":
                router.push('/index/flow2')
                break;
            case "4":
                router.push('/index/flow3')
                break;
            default:
                break;
        }

    })

    const mainGraph = new Graph({
        container: document.querySelector('.main-container'),
        grid: true,
        mousewheel: {
            enabled: true,
            global: true,
            modifiers: ['ctrl', 'meta'],
        },
    })

    mainGraph.on('node:click', ({ e, x, y, node, view }) => {
        console.log(node.id)

        fetch('./bpmn.json')
            .then((response) => response.json())
            .then((data) => {
                data.forEach(element => {
                    if (element.id == node.id) {
                        drawInfo = reactive({})
                        drawInfo = element.info
                        console.log(drawInfo)
                    }
                });
                drawer.value = true;
            })
    })


    const source = graph.addNode({
        id: "1",
        shape: 'custom-node', // 可以直接使用上面注册过的 shape
        x: 40,
        y: 0,
        label: '灌区遥感监测产品生产',
    })

    const target = graph.addNode({
        id: "2",
        shape: 'custom-node',
        x: 40,
        y: 200,
        label: '遥感日监测产品融合',
    })

    const target1 = graph.addNode({
        id: "3",
        shape: 'custom-node',
        x: 40,
        y: 400,
        label: '灌区面积及水量动态监测',
    })

    const target2 = graph.addNode({
        id: "4",
        shape: 'custom-node',
        x: 40,
        y: 600,
        label: '田间水循环模拟',
    })
    

    graph.addEdge({
        source,
        target,
        attrs: {
            line: {
                stroke: '#8f8f8f',
                strokeWidth: 1,
            },
        },
    })
    graph.addEdge({
        source: target,
        target: target1,
        attrs: {
            line: {
                stroke: '#8f8f8f',
                strokeWidth: 1,
            },
        },
    })
    graph.addEdge({
        source: target1,
        target: target2,
        attrs: {
            line: {
                stroke: '#8f8f8f',
                strokeWidth: 1,
            },
        },
    })


    graph.centerContent()



    fetch('./bpmn.json')
        .then((response) => response.json())
        .then((data) => {
            data.forEach(element => {
                console.log(element)
                if (element.shape == "custom-node1") {
                    mainGraph.addNode(element)
                } else {
                    mainGraph.addEdge(element)
                }
            });

        })



})

Graph.registerNode(
    'custom-node',
    {
        inherit: 'rect', // 继承于 rect 节点
        width: 200,
        height: 150,
        markup: [
            {
                tagName: 'rect', // 标签名称
                selector: 'body', // 选择器
            },
            {
                tagName: 'image',
                selector: 'img',
            },
            {
                tagName: 'text',
                selector: 'label',
            },
        ],
        attrs: {
            body: {
                stroke: '#8f8f8f',
                strokeWidth: 1,
                fill: '#fff',
                rx: 6,
                ry: 6,
            },
            img: {
                'xlink:href': task,
                width: 50,
                height: 50,
                x: 70,
                y: 30,
            },
            text: {
                y: 40,
                fontSize: 16
            }
        },
    },
    true,
)
Graph.registerNode(
    'custom-node1',
    {
        inherit: 'rect', // 继承于 rect 节点
        width: 240,
        height: 60,
        attrs: {
            body: {
                stroke: '#4caf50',
                strokeWidth: 1,
                fill: 'rgba(95,149,255,0.05)',
                refWidth: 1,
                refHeight: 1,
            },
            image: {
                'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ',
                width: 25,
                height: 25,
                x: 190,
                y: 17,
            },
            label: {
                refX: 40,
                refY: 14,
                fill: 'rgba(0,0,0,0.85)',
                fontSize: 12,
                'text-anchor': 'start',
            },
        },
        markup: [
            {
                tagName: 'rect',
                selector: 'body',
            },
            {
                tagName: 'image',
                selector: 'image',
            },
            {
                tagName: 'text',
                selector: 'title',
            },
            {
                tagName: 'text',
                selector: 'text',
            },
            {
                tagName: 'text',
                selector: 'label',
            },
        ],
    },
    true,
)
Graph.registerEdge(
    'bpmn-edge',
    {
        inherit: 'edge',
        attrs: {
            line: {
                stroke: '#A2B1C3',
                strokeWidth: 2,
            },
        },
    },
    true,
)

const handleClose = function () {
    drawer.value = false
}

</script>

<style lang="scss" scoped>
.side-container {
    .side-chart {
        background: #ccc;
    }
}
</style>
<style lang="scss">
.el-drawer__title {
    font-size: 30px
}
</style>